<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>200-数理化公式编辑器</title>
    <meta name="cdnload" content="mathjax" />
    <style>
      a {
        margin: 8px;
      }
    </style>
  </head>

  <body>
    <div>
      <p>
        文章参考：
        <a href="https://www.cnblogs.com/mqingqing123/p/12711372.html" target="_blank"> MathJax的使用 </a>
        <a href="https://blog.csdn.net/ethmery/article/details/50670297" target="_blank">MathJax的基本语法</a>

        <a href="https://www.osgeo.cn/mathjax/basic/mathjax.html" target="_blank">Mathjax中文文档</a>
        <a href="https://www.npmjs.com/package/mathjax" target="_blank">Mathjax npm</a>
      </p>
    </div>
    <div class="box">
      公式示例：
      <ol>
        <li>
          当 \( a \ne 0 \) 时, 一元二次方程 \( ax^2 + bx + c = 0 \) 的根为： $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
        </li>
        <li>组合数公式： $$C_n^m = {n! \over m!(n-m)}$$</li>
        <li id="active">JavaScript 同步渲染...</li>
        <li id="active-sync">JavaScript 异步渲染...</li>
      </ol>
    </div>
    <script>
      // js 动态渲染 注意 斜线的转义 和 异步样式
      const code = `椭圆：{x^2 \\over a^2}+{y^2 \\over b^2}=1(a>b>0)，焦点(\\pm c, 0)，a^2-c^2=c^2 ， 离心率  e={焦距 \\over 长轴}={2a \\over 2c}={a \\over c} `
      const codeSync = `
      (2017·辽宁二十四中联考卷)已知A，B，C是平面上不共线的三点，O是 \\triangle ABC 的重心，
      动点  P  满足 \\overrightarrow{OP}=\\dfrac{1}{3}
      \\left( \\dfrac{1}{2} \\overrightarrow{OA}+\\dfrac{1}{2}\\overrightarrow{OB}+2\\overrightarrow{OC} \\right)，
      则P一定为 \\triangle ABC 的( )
      `
      document.getElementById('active').append(MathJax.tex2chtml(code))
      setTimeout(() => {
        console.log(codeSync)
        document.getElementById('active-sync').append(MathJax.tex2chtml(codeSync))
      }, 500)
    </script>
  </body>
</html>
